<template>
  <div class="app-container">
    <el-card class="search-card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        v-show="showSearch"
        label-width="98px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入姓名"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop="idCardNumber">
              <el-input
                v-model="queryParams.idCardNumber"
                placeholder="请输入身份证号"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年级" prop="gradeId">
              <el-select
                v-model="queryParams.gradeId"
                placeholder="请选择年级名称"
                style="width: 100%"
                @change="gradeFun_1"
              >
                <el-option
                  v-for="(item, index) in gradeList"
                  :key="index"
                  :value="item.id"
                  :label="item.gradeName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="班级" prop="classId">
              <el-select
                v-model="queryParams.classId"
                placeholder="请选择班级"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in classList_1"
                  :key="index"
                  :value="item.id"
                  :label="item.className"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卡片状态" prop="cardStatus">
              <el-select
                v-model="queryParams.cardStatus"
                placeholder="请选择卡片状态"
                style="width: 100%"
              >
                <el-option value="0" label="正常"></el-option>
                <el-option value="1" label="挂失"></el-option>
                <el-option value="2" label="注销"></el-option>
                <el-option value="3" label="未绑"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
              >
                搜索
              </el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="search-card">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="buttonMethods(1)"
          >
            绑卡
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-s-tools"
            size="mini"
            @click="buttonMethods(60)"
          >
            批量消卡
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-s-tools"
            size="mini"
            @click="importStatus = true"
          >
            批量导入
          </el-button>
        </el-col>

        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
    </el-card>
    <el-card class="table-card">
      <el-table :data="dataList" @selection-change="handleSelectionChange" row-key="id">
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
          align="center"
        />
        <el-table-column label="学生姓名" align="center" prop="name" />
        <el-table-column label="年级" align="center" prop="gradeName" />
        <el-table-column label="班级" align="center" prop="className" />
        <el-table-column
          label="身份证号"
          align="center"
          prop="idCardNumber"
          width="200"
        />
        <el-table-column label="手机号" align="center" prop="phoneNumber" />
        <el-table-column label="卡号" align="center" prop="cardNumber" />
        <el-table-column label="剩余余额" align="center" prop="walletBalance" />
        <el-table-column label="卡片状态" align="center" prop="cardStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.cardStatus == 0">正常</span>
            <span v-if="scope.row.cardStatus == 1">挂失</span>
            <span v-if="scope.row.cardStatus == 2">注销</span>
            <span v-if="scope.row.cardStatus == 3">未绑</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" prop="createdBy" />
        <el-table-column label="创建时间" align="center" prop="createdAt" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="200"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="buttonMethods(10, scope.row)">
              换卡
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="buttonMethods(20, scope.row)"
              v-if="scope.row.cardStatus == 0"
            >
              挂失
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="buttonMethods(30, scope.row)"
              v-if="scope.row.cardStatus == 1"
            >
              消卡
            </el-button>
            <el-button type="text" size="mini" @click="buttonMethods(40, scope.row)">
              查看记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 绑卡 -->
    <el-dialog :title="title" :visible.sync="cardOpen" width="500px" append-to-body>
      <el-form ref="form" :model="cardInfo" label-width="80px">
        <el-form-item label="身份证号" class="is-required">
          <el-input
            v-model="cardInfo.idCardNumber"
            placeholder="请输入身份证号"
            maxlength="18"
            @blur="getPersonByIdcardFun"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="学生姓名">
          <el-input
            v-model="cardInfo.name"
            placeholder="输入身份证号后自动获取学生姓名"
            maxlength="50"
            show-word-limit
            disabled="true"
          />
        </el-form-item>
        <!-- <el-form-item label="校区">
          <el-input
            v-model="cardInfo.cardNumber"
            placeholder="输入身份证号后自动获取校区"
            maxlength="50"
            show-word-limit
            disabled="true"
          />
        </el-form-item> -->
        <el-form-item label="年级">
          <el-input
            v-model="cardInfo.gradeName"
            placeholder="输入身份证号后自动获取年级"
            maxlength="50"
            show-word-limit
            disabled="true"
          />
        </el-form-item>
        <el-form-item label="班级">
          <el-input
            v-model="cardInfo.className"
            placeholder="输入身份证号后自动获取班级"
            maxlength="50"
            show-word-limit
            disabled="true"
          />
        </el-form-item>
        <el-form-item label="卡号" class="is-required">
          <el-input
            v-model="cardInfo.cardNumber"
            placeholder="请输入卡号"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cardSubmitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 换卡 -->
    <el-dialog :title="title" :visible.sync="cardOpen_2" width="500px" append-to-body>
      <el-form ref="form" :model="cardInfo" label-width="80px">
        <!-- <el-form-item label="当前卡号" class="is-required">
          <el-input
            v-model="cardInfo.cardNumber"
            placeholder="请输入当前卡号"
            maxlength="50"
            :disabled="true"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="剩余余额">
          <el-input
            v-model="cardInfo.walletBalance"
            placeholder="请输入剩余余额"
            maxlength="50"
            :disabled="true"
            show-word-limit
            ><template slot="append">元</template>
          </el-input>
        </el-form-item>  -->
        <el-form-item label="新卡号" class="is-required">
          <el-input
            v-model="cardInfo.cardNumber"
            placeholder="请输入新卡号"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <!-- <el-form-item label="换卡收费" class="is-required">
          <el-input
            v-model="cardInfo.cardNumber"
            placeholder="请输入换卡收费"
            maxlength="50"
            show-word-limit
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cardSubmitForm_2">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看记录 -->
    <el-dialog :title="title" :visible.sync="cardOpen_3" width="500px" append-to-body>
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in cardRecordList"
          :key="index"
          :timestamp="activity.operationTime"
        >
          {{ activity.operationContent }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
    <!-- 人员导入 -->
    <el-dialog title="人员导入" :visible.sync="importStatus" width="500px" append-to-body>
      <div style="width: 100%">
        <el-button type="primary" @click="xzmb">下载模板</el-button>
        <div style="text-align: center; margin-top: 20px">
          <file-upload @success="fileSuccess" url="/campus/person/cardUpload" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="importStatus = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listGrade } from "@/api/campus/grade";
import { listClassManage } from "@/api/campus/classManage";
import {
  addCard,
  getPersonByIdcard,
  cardLoss,
  batchCardCancellation,
  personCard,
  cardRecord,
} from "@/api/card/index.js";
export default {
  name: "Grade",
  dicts: ["facial_state", "sys_open_status", "personnel_identity"],
  data() {
    return {
      showSearch: true,
      cardInfo: {
        idCardNumber: null,
      },
      cardOpen: false,
      cardOpen_2: false,
      cardOpen_3: false,
      importStatus: false,
      title: "",
      gradeList: [],
      classList_1: [],
      classList_2: [],

      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        idCardNumber: null,
        gradeId: null,
        classId: null,
        cardStatus: null,
      },
      cardRecordList: [],
      reverse: false,
      selectList: [],
    };
  },
  created() {
    this.getList();
    this.listGradeFun();
  },

  activated() {
    this.$forceUpdate();
    this.resetForm("queryForm");
  },
  methods: {
    /**
     * 获取列表数据
     *
     * @returns void
     */
    getList() {
      personCard(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.dataList = res.rows;
          this.total = res.total;
        }
      });
    },
    /**
     * 获取成绩列表
     */
    listGradeFun() {
      listGrade({ pageNum: 1, pageSize: 200 }).then((res) => {
        if (res.code == 200) {
          this.gradeList = res.rows;
        }
      });
    },
    /**
     * 根据年级id获取班级列表
     *
     * @param options 年级id
     */
    gradeFun_1(options) {
      this.$set(this.queryParams, "classId", "");
      listClassManage({ pageNum: 1, pageSize: 200, gradeId: options }).then(
        (response) => {
          this.classList_1 = response.rows;
        }
      );
    },
    /**
     * 执行按钮相关的方法
     *
     * @param options 按钮相关的配置选项
     * @param value 按钮的值
     */
    buttonMethods(options, value) {
      if (options == 1) {
        this.title = "绑卡";
        this.cardOpen = true;
        this.cardInfo = {};
      } else if (options == 10) {
        this.title = "换卡";
        this.cardOpen_2 = true;
        this.cardInfo = {
          id: value.id,
        };
      } else if (options == 20) {
        this.$confirm("此操作将永久挂失, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            cardLoss({
              cardNumber: value.cardNumber,
              id: value.id,
            }).then((res) => {
              if (res.code == 200) {
                this.getList();
                this.$message.success("操作成功");
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {});
      } else if (options == 30) {
        // 批量注销卡
        this.$confirm("此操作将永久销卡, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            batchCardCancellation({
              idCardNumbers: [value.idCardNumber],
            }).then((res) => {
              if (res.code == 200) {
                this.getList();
                this.$message.success("操作成功");
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {});
      } else if (options == 40) {
        this.title = "查看记录";
        this.cardOpen_3 = true;
        cardRecord({ id: value.id }).then((res) => {
          this.cardRecordList = res.data;
        });
      }
      // 批量销卡
      else if (options == 60) {
        if (this.selectList.length == 0) {
          return this.$message.error("请选择要销卡的学生");
        }
        var arr = [];
        this.selectList.forEach((element) => {
          arr.push(element.idCardNumber);
        });
        this.$confirm("此操作将永久销卡, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            batchCardCancellation({
              idCardNumbers: arr,
            }).then((res) => {
              if (res.code == 200) {
                this.getList();
                this.$message.success("操作成功");
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {});
      }
    },
    /**
     * 通过身份证号获取个人信息
     */
    getPersonByIdcardFun() {
      if (this.cardInfo.idCardNumber.length > 6) {
        getPersonByIdcard({ idCardNumber: this.cardInfo.idCardNumber }).then((res) => {
          if (res.code == 200) {
            this.cardInfo = res.data;
          }
        });
      }
    },
    /**
     * 提交卡片信息
     * 该方法用于提交卡片信息到服务器，并根据服务器的响应进行相应处理。
     * @returns void
     */
    cardSubmitForm() {
      var data = this.cardInfo;
      if (!data.id) {
        return this.$message.error("未匹配到学生");
      }
      if (!data.cardNumber) {
        return this.$message.error("卡号不能为空");
      }
      addCard(data).then((res) => {
        if (res.code == 200) {
          this.cardOpen = false;
          this.getList();
          this.$message.success("操作成功");
          this.cardInfo = {};
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /**
     * 提交卡片表单2
     * @returns void
     */
    cardSubmitForm_2() {
      var data = this.cardInfo;
      // if (!data.idCardNumber) {
      //   return this.$message.error("身份证号不能为空");
      // }
      if (!data.id) {
        return this.$message.error("未匹配到学生");
      }
      if (!data.cardNumber) {
        return this.$message.error("卡号不能为空");
      }
      addCard(data).then((res) => {
        if (res.code == 200) {
          this.cardOpen_2 = false;
          this.getList();
          this.$message.success("操作成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleSelectionChange(options) {
      console.log(options, "options");
      this.selectList = options;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    cancel() {
      this.cardOpen_2 = false;
      this.cardOpen = false;
    },
    xzmb() {
      window.open(
        "https://school.leyibei.com/api/common/downloads?filename=卡号表.xls",
        "_blank"
      );
    },
    /**
     * 文件上传成功后调用的方法
     */
    fileSuccess() {
      this.cardOpen = false;
      this.cardOpen_2 = false;
      this.cardOpen_3 = false;
      this.importStatus = false;
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
  },
};
</script>
